import { useState, useEffect } from 'react';
import logo from '~/logo.svg';
import { getApiDemo } from '~/server/api/api_demo';

const Hello = () => {
  const [text, setText] = useState('');
  useEffect(() => {
    getApiDemo({
      type: 'json',
    })
      .then((res) => {
        console.log(res, 'res');
        setText(res.ishan);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center',
        paddingTop: '50px',
      }}
    >
      <img src={logo} alt='Logo' style={{ height: '150px' }} />
      <ul
        style={{
          padding: 0,
          listStyle: 'none',
          fontSize: '1.6rem',
          display: 'flex',
          flexDirection: 'column',
          gap: '14px',
        }}
      >
        <li>🚀 Vite</li>
        <li>🔥 React</li>
        <li>📖 TypeScript</li>
        <li>🔨 Eslint</li>
        <li>💅 Prettier</li>
        <li>🔗 Axios</li>
        <li>🎰 less</li>
      </ul>
      <p style={{ fontSize: '14px', letterSpacing: '0.5px', fontWeight: 'bold' }}>{text}</p>
      <div>
        <a
          style={{ color: '#F24C4C' }}
          target='_blank'
          href='https://gitee.com/shadow-cheng/react-start'
          rel='noreferrer'
        >
          如果可以，请给我一个Star🌟，阿里嘎多🙇，谢谢！
        </a>
      </div>
    </div>
  );
};

export default Hello;
